import React, { useEffect, useState } from 'react'
import { Button, Input, Space, Table } from 'antd';
import type { TableProps } from 'antd';
import axios from 'axios'


interface DataType {
  createdAt: string;
  updatedAt: string;
  id: number;
  title: string;
  content: string[];
}


interface paramsPage {
  page:number;
  pageSize:number;
}


const Home = () => {
const columns: TableProps<DataType>['columns'] = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '内容',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button>编辑</Button>
        <Button>删除</Button>
      </Space>
    ),
  },
];

 const [artiList,setArtiList]=useState<DataType[]>([])
 const [total,setTotal]=useState(0)
 const [queryPage,setQueryPage]=useState<paramsPage>({
    page:1,
   pageSize: 10
 })

 const getData=async(queryPage:paramsPage)=>{
  const res=await axios.get("http://172.27.2.110/article/list",{
    params:{
        queryPage
    }
  })
  const {count,rows}=res.data
  setTotal(count)
  setArtiList(rows)
 }

 useEffect(()=>{
  getData(queryPage)
 },[])


 

  return (
    <div>
        <Input placeholder='请输入关键字' style={{width: "150px"}}/><Button>搜索</Button>
        <Button>新增</Button>
       <Table<DataType>
       columns={columns}
       dataSource={artiList}
       pagination={{
         total:total,
         showSizeChanger:true,
         showQuickJumper:true,
         showTotal:(total) => `Total ${total} items`
       }}
    />
     
    </div>
  )
}

export default Home
